<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<title>Car Price</title>
		<script src='<c:url value="/js/jquery/jquery-3.3.1.min.js" />'></script>
		<script src='/js/car/carPrice.js'></script>
	</head>
	<body>
		<h2>Get Car Price</h2>
		<form:form modelAttribute="carPriceRequest" action="/price" method="POST">
			<table>
				<tr>
					<td>Car Brand</td>
					<td>
						<form:select path="brands" id="brands" multiple="true" onchange="updateMyStatus(this);" size="5">
							<form:option value="">--- ALL ---</form:option>
							<form:options items="${brandList}" itemLabel="name" itemValue="id"/>
						</form:select>
					</td>
				</tr>
				
				<tr>
					<td>Car Product</td>
					<td>
						<form:select path="products" id="products" title="my_parent_brands" multiple="true" onchange="updateMyStatus(this);" onfocus="updateMySelectOptions(this);" size="5">
							<form:option value="">--- ALL ---</form:option>
							<form:options items="${productList}" itemLabel="name" itemValue="id"/>
						</form:select>
					</td>
				</tr>
				
				<tr>
					<td>Car Displacement</td>
					<td>
						<form:select path="displacements" id="displacements" title="my_parent_products" multiple="true" onchange="updateMyStatus(this);" onfocus="updateMySelectOptions(this);" size="5">
							<form:option value="">--- ALL ---</form:option>
							<form:options items="${displacementList}" itemLabel="name" itemValue="id"/>
						</form:select>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="Get Price" onclick="showPrices('carPriceRequest', 'pricesTable');"/>
					</td>
				</tr>
			</table>
		</form:form>
		
		<table id="pricesTable">
			<thead>
				<tr>
					<th abbr="brandName" data-property="String">品牌</th>
					<th abbr="product">车型</th>
					<th abbr="model">版本</th>
					<th abbr="displacement">排量</th>
					<th abbr="foursName">4S</th>
					<th abbr="price">价格</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${prices}"  var="price">
					<tr>
						<td>${price.brandName}</td>
						<td>${price.product}</td>
						<td>${price.model}</td>
						<td>${price.displacement}</td>
						<td>${price.foursName}</td>
						<td>${price.price}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</body>
</html>
